{#
/**
 * @file
 * Default theme implementation for a comment body field.
 *
 * Available variables:
 * - attributes: HTML attributes for the containing element.
 * - label_hidden: Whether to show the field label or not.
 * - title_attributes: HTML attributes for the title.
 * - label: The label for the field.
 * - multiple: TRUE if a field can contain multiple items.
 * - items: List of comment body items. Each item contains:
 *   - attributes: HTML attributes for the item.
 *   - content: The content of the comment body item.
 * - entity_type: The entity type to which the field belongs.
 * - field_name: The name of the field.
 * - field_type: The type of the field.
 * - label_display: The display settings for the label.
 *
 * @see template_preprocess_field()
 *
 * @ingroup themeable
 */
#}
{% if label_hidden %}
  {% if multiple %}
    <div{{ attributes.addClass('comment-body-multiple space-y-4') }}>
      {% for item in items %}
        <div class="comment-body-item prose prose-sky max-w-none">
          {{ item.content }}
        </div>
      {% endfor %}
    </div>
  {% else %}
    {% for item in items %}
      <div{{ attributes.addClass('comment-body prose prose-sky max-w-none') }}>
        {{ item.content }}
        
        {# 处理评论中的链接和引用样式 #}
        <script>
          (function() {
            // 确保DOM加载完成
            if (document.readyState === 'loading') {
              document.addEventListener('DOMContentLoaded', styleCommentElements);
            } else {
              styleCommentElements();
            }
            
            function styleCommentElements() {
              // 为评论中的链接添加样式
              const links = document.querySelectorAll('.comment-body a');
              links.forEach(link => {
                link.classList.add('text-sky-500', 'hover:text-sky-600', 'hover:underline');
              });
              
              // 为块引用添加样式
              const blockquotes = document.querySelectorAll('.comment-body blockquote');
              blockquotes.forEach(quote => {
                quote.classList.add('border-l-4', 'border-sky-300', 'pl-4', 'italic', 'text-gray-600');
              });
            }
          })();
        </script>
      </div>
    {% endfor %}
  {% endif %}
{% else %}
  <div{{ attributes }}>
    <div{{ title_attributes.addClass('comment-body-label font-semibold text-sky-500 mb-2') }}>{{ label }}</div>
    {% if multiple %}
      <div class="comment-body-multiple space-y-4">
        {% for item in items %}
          <div class="comment-body-item prose prose-sky max-w-none">
            {{ item.content }}
          </div>
        {% endfor %}
      </div>
    {% else %}
      {% for item in items %}
        <div class="comment-body prose prose-sky max-w-none">
          {{ item.content }}
        </div>
      {% endfor %}
    {% endif %}
  </div>
{% endif %}